<template>
  <PageContainer>
    <view v-if="current !== -1" class="container">
      <Header title="表单数据" v-model:modelValue="headerHeader" :data="current">
        <view>
          <CapsuleTabs
            v-model:current="current"
            :list="items"
            @change="onClickItem"
          />
          <view v-if="current === 1" class="search">
            <TSearch @confirm="handleConfirm" placeholder="搜索填写者姓名"></TSearch>
          </view>
        </view>
      </Header>
      <StatisticsResult
        v-if="current === 0 && serviceTicketFormId"
        :serviceTicketFormId="serviceTicketFormId"
      ></StatisticsResult>
      <DetailDatas
        ref="detailDatasRef"
        v-else-if="current === 1 && serviceTicketFormId"
        :serviceTicketFormId="serviceTicketFormId"
      ></DetailDatas>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* formDatas 表单数据 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import CapsuleTabs from '@/components/CapsuleTabs/index.vue';
  import { reactive, ref } from 'vue';
  import StatisticsResult from './components/StatisticsResult/index.vue';
  import DetailDatas from './components/DetailDatas/index.vue';
  import TSearch from '@/components/TSearch/index.vue';
  import { onLoad } from '@/router';

  const headerHeader = ref(0);
  const items = reactive(['统计结果', '详细数据']);
  const current = ref(-1);
  const serviceTicketFormId = ref();
  const detailDatasRef = ref<InstanceType<typeof DetailDatas>>();
  onLoad<'formDatas'>((op) => {
    current.value = op.currentIndex;
    serviceTicketFormId.value = op.id;
  });
  const onClickItem = (index: number) => {
    current.value = index;
  };
  const handleConfirm = (keyWord: string) => {
    detailDatasRef.value?.handleSearch(keyWord);
  };
</script>

<style lang="scss" scoped>
  .container {
    .header-box {
      padding: 32rpx;
      display: flex;
      justify-content: center;
      ::v-deep .segmented-control {
        width: 352rpx;
        height: 64rpx;
        background-color: #f2f3f5;
        border-radius: 44rpx;
        .segmented-control__item--button {
          border-style: none;
          .segmented-control__text {
            color: #666664 !important;
            font-size: 28rpx !important;
          }
        }

        .segmented-control__item--button--active {
          border-radius: 44rpx;
          .segmented-control__text {
            color: white !important;
            font-size: 28rpx !important;
          }
        }
      }
    }
    .search {
      height: 72rpx;
      padding: 16rpx 32rpx;
      background-color: white;
    }
  }
</style>
